/* 我们可以通过11个步骤将函数组件 `Clock` 转换为类

1. 创建一个名称扩展为 React.Component 的ES6 类

2. 创建一个叫做render()的空方法

3. 将函数体移动到 render() 方法中

4. 在 render() 方法中，使用 this.props 替换 props

5. 删除剩余的空函数声明

6. 为当前组件添加一个局部状态

7. 将this.props换成this.state

8. 给组件添加生命周期

9. 编写一个tick的函数,里面设定定时器,并且更新时间

10. 在componentDidMount中调用tick函数

11. 在componentWillUnmount这个钩子中卸载定时器 */
import React from 'react'
class ClockG extends React.Component{
    constructor(){
        super()
        this.state={ //局部状态
            timer:new Date().toLocaleTimeString()
        }
    }
    componentDidMount(){ //组件的生命周期，此处虚拟dom渲染成了真实dom
        // 相当于vue里面的mounted，小程序里面的onReady
        this.tick()
    }
    componentWillUnmount(){ //组件即将卸载
        // 相当于vue中的beforeDestory
        clearInterval(this.inderver)
    }
    tick(){
        // 更新时间，==>也就是说要更新state的状态
        // 小程序里面如何更新状态？setDate
        // react 中更新状态，setState,传递一个新的值
        this.inderver = setInterval(()=>{
            this.setState({
                timer:new Date().toLocaleTimeString()
            })
        },300)
    }
    render(){ //这是react生命周期中的一个钩子函数,这里会进行diff算法和更新虚拟dom
        // 视图如果要更新，必须要调用render方法
        return(
            <fieldset>
                <legend>时间在流逝</legend>
                <h1>现在是北京时间：{this.state.timer}</h1>
            </fieldset>
        )
    }
}
export default ClockG